<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/bootstrap.css">
  <link rel="stylesheet" href="./css/1_.css">
  <link rel="stylesheet" href="./css/2_carouser.css">
  <link rel="stylesheet" href="./css/3_.css">
  <script src="./js/jquery.min.js"></script>
  <script src="./js/popper.min.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <title>Document</title>
  <style>
  </style>
</head>

<body>
  <!-- <div class="container"> -->
    <!-- nav导航 -->
    <!-- navbar 基础类  navbar-dark 主题（深色类和浅色类） 可以给背景颜色 -->
    <!-- navbar-expand-lg主要负责响应式 大小菜单什么时候切换出现 -->
  
    <nav class="navbar navbar-dark navbar-expand-lg bg-dark jlc-nav ">
      <!-- navbar-brand给logo （规格）-->
      <a href="#" class="navbar-brand">
        <img src="./img/0/1.png" alt="">
      </a>
      <!-- 缩小菜单，当低于某个宽度时，缩小菜单出现 ，缩小菜单在大屏时隐藏-->
      <button class="navbar-toggler" data-toggle="collapse" data-target="#myDiv">
        <!-- 小菜单的三条小横线 -->
        <span class="navbar-toggler-icon"></span>
      </button>
      <!-- 被折叠菜单 collapse 控制消失隐藏
      navbar-collapse 管对齐方式的（样式）-->
      <div class="collapse navbar-collapse xz-menu m-0" id="myDiv">
        <!-- 菜单去 -->
        <ul class="nav d-flex">
          <li class="nav-item jlc-1">
            <a class="nav-link active bg-danger" href="#">
              首页
            </a>
          </li>
          <li class="nav-item jlc-2">
            <a class="nav-link" href="#">
              产品中心
            </a>
            <div id="jlc-tu1">
              <ol class="llpp" >
                <div id="llp"><img src="./img/0/4.png" alt=""></div>
                <div><img src="./img/0/5.png" alt=""></div>
                <div><img src="./img/0/6.png" alt=""></div>
                <div><img src="./img/0/7.png" alt=""></div>
                <div><img src="./img/0/8.png" alt=""></div>
                <div><img src="./img/0/9.png" alt=""></div>
              </ol>
            </div>
          </li>
          <li class="nav-item jlc-2">
            <a class="nav-link" href="#">
              回馈活动
            </a>
            <div id="jlc-tu1">
              <ol class="llpp" >
                <div id="llp"><img src="./img/0/2.png" alt=""></div>
                <div><img src="./img/0/3.png" alt=""></div>
                <!-- <div><img src="./img/0/2.png" alt=""></div> -->
              </ol>
            </div>
          </li>
         
          <li class="nav-item jlc-2">
            <a class="nav-link" href="#">
              历史文化
            </a>
            <div id="jlc-tu1">
              <ol class="llpp" >
                <div id="llp"><img src="./img/0/10.png" alt=""></div>
                <div><img src="./img/0/11.png" alt=""></div>
                <div><img src="./img/0/12.png" alt=""></div>
              </ol>
            </div>
          </li>
          <li class="nav-item jlc-2">
            <a class="nav-link" href="#">
              工艺优胜
            </a>
            <div id="jlc-tu1">
              <ol class="llpp" >
                <div id="llp"><img src="./img/0/13.png" alt=""></div>
                <div><img src="./img/0/14.png" alt=""></div>
                <div><img src="./img/0/15.png" alt=""></div>
              </ol>
            </div>
          </li>
          <li class="nav-item jlc-2">
            <a class="nav-link" href="#">
              新闻资讯
            </a>
            <div id="jlc-tu1">
              <ol class="llpp" >
                <div id="llp"><img src="./img/0/16.png" alt=""></div>
                <div><img src="./img/0/17.png" alt=""></div>
                <!-- <div><img src="./img/0/2.png" alt=""></div> -->
              </ol>
            </div>
          </li>
          <li class="nav-item jlc-2">
            <a class="nav-link" href="#">
              关于我们
            </a>
            <div id="jlc-tu1">
              <ol class="llpp" >
                <div id="llp"><img src="./img/0/18.png" alt=""></div>
                <div><img src="./img/0/19.png" alt=""></div>
                <!-- <div><img src="./img/0/2.png" alt=""></div> -->
              </ol>
            </div>
          </li>
        </ul>
        <!-- 先写搜索区域 -->
        <!-- <div class="xz-search bg-white d-flex justify-content-between"> -->
          
          <!-- 输入框 -->
          <!-- <input type="text" class="border-0"> -->
          <!-- 放大镜的图按钮 -->
          <!-- <a href="#">
            <img src="./img/0/下载.png" alt="">
          </a>
        </div> -->
        <!-- 菜单区 -->
       

      </div>
      <button class="btn btn-dark" data-toggle="collapse" data-target="#show1"><img src="./img/0/下载.png" alt=""></button>
      <div class="jlc-en"><a href="#">EN/英文版</a></div>
    </nav>
    <div class="collapse box" id="show1"> 
      <div class="xz-search bg-white d-flex justify-content-between mt-2">
          
      <!-- 输入框 -->
      <input type="text" class="border-0 ml-2 bg-warning mt-2 mb-2" placeholder="请输入要搜索...">
      <!-- 放大镜的图按钮 -->
      <a href="#" class="bg-primary">
        <img src="./img/0/下载.png" alt="" class="ml-3 mr-3 mt-1">
      </a>
    </div>
   </div>
  

 
   
 
</body>

</html>



